<template>
  <div class="home" :style="{background:bgColor}">
    <div class="top" ref="navigation" :style="{fontSize:titleSize + 'px',color:titleColor}">
      <h2>农业数据实时监控系统</h2>
      <img src="../static/img/top02.png" alt="" />
      <div @click="change">切换主题</div>
    </div>

    <div class="wrap">
      <!-- 左边 -->
      <div class="left">
        <div class="border-left-top">
          <AreaTopPage></AreaTopPage>
        </div>
        <div class="border-left-bottom">
          <harvest></harvest>
        </div>
      </div>
      <!-- 中间 -->
      <div class="center">
        <div class="border-center-top">
          <prop></prop>
        </div>
        <div class="border-center-bottom">
          <coverage></coverage>
        </div>
      </div>
      <!-- 右边 -->
      <div class="right">
        <div class="border-right-top">
          <trend></trend>
        </div>
        <div class="border-right-bottom">
          <total></total>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import harvest from "./harvest";
import AreaTopPage from './AreaTopPage';
import prop from './cropAreasProportion';
import coverage from './CropCoverage';
import trend from './GrowthTrendPage';
import total from './TotalAreaCropsProprtion'
export default {
  name: "HomeView",
  components: {
    harvest,AreaTopPage,prop,coverage,trend,total
  },
  data(){
    return{
      titleSize:0,
      bgColor:'#fff',
      titleColor:'#000',
      isOn:true
    }
  },
  mounted(){
    this.screen()
    window.addEventListener('resize',this.screen)
  },
  methods:{
    screen(){
      this.titleSize = this.$refs.navigation.offsetWidth / 75
    },
    // 切换主题
    change(){
      this.isOn = !this.isOn
      if(this.isOn){
        this.bgColor = '#fff',
        this.titleColor = '#000'
      }else{
        this.bgColor = '#000',
        this.titleColor = '#fff'
      }
      this.$store.commit('change',this.isOn)
    }
  }
};
</script>
<style>
img {
  width: 100%;
}

.home {
  width: 100%;
  height: 100%;
  position: relative;
}

.top {
  width: 100%;
  height: 10%;
}

.top h2 {
  position: absolute;
  left: 41%;
}

.top div{
  color:lime;
  position:absolute;
  right:1%;
  top: 0;
}

/* .border{
    border:1px solid blue;
  } */

.wrap {
  width: 100%;
  height: 90%;
  display: flex;
}

.left {
  width: 25%;
  height: 100%;
  /* border: 1px solid red; */
}

.center {
  width: 48%;
  height: 100%;
  /* border: 1px solid red; */
  margin-left: 1%;
}

.right {
  width: 25%;
  height: 100%;
  /* border: 1px solid red; */
  margin-left: 1%;
}

.border-left-top,
.border-right-top {
  width: 99%;
  height: 50%;
  margin-left:1%;
  border: 1px solid blue;
}

.border-left-bottom,
.border-right-bottom {
  width: 99%;
  height: 49%;
  border: 1px solid blue;
  margin-top: 1%;
  margin-left:1%;
}

.border-center-top {
  width: 100%;
  height: 25%;
  border: 1px solid blue;
}

.border-center-bottom {
  width: 100%;
  height: 74%;
  border: 1px solid blue;
  margin-top: 1%;
}
</style>
